<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>路径</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>
    <svg width="500" height="250" xmlns="http://www/w3.org/2000/svg" version="1.1">
        <text x="0" y="15" fill="red">Hello World</text>
    </svg>

    <svg width="500" height="250" xmlns="http://www/w3.org/2000/svg" version="1.1">
        <text x="0" y="15" fill="red" transform="rotate(30,0,40)">Hello World</text>
    </svg>

    <svg width="500" height="250" xmlns="http://www/w3.org/2000/svg" version="1.1">
        <!-- <path id="path1" d="M150 0 L75 200 L225 200 Z" style="fill: green; stroke: red" /> -->
        <path id="path1" d="M75,20 a1,1 0 0,0 100,0" fill="none" />
        <text x="10" y="100" fill="red">
            <!-- textPath 让文本在指定的路径上排列 -->
            <textPath xlink:href="#path1">Hello World Hello</textPath>
        </text>
    </svg>
</body>

</html>